<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script src="/jquery-3.5.1.min.js"></script>
    <script src="/main.js"></script>
</head>
<body>
    <div>
    <button id="btn_first">点击设置第一组数据</button>
    <button id="btn_sec">点击设置第二组数据</button>
    </div>
    <div>
        <button id="btn_show">点击获取数据</button>
        <a id="data">这里是内容显示区域</a>
    </div>
    <div>请按下F12打开控制台结合源码与输出查看</div>
    <script>
        let db=$.db("db_test");//初始化组件
    </script>
    <script>
        //这是读取多配置测试
        console.log(db.read(["hello1","hello2"],{
            "hello1":"这是第一个默认值",
            "hello2":"这是hello2的默认值"
        }));
        //一次性写入多个配置
        db.write({hello1:"这是写入后的第一个值",hello2:"这是写入后的第二个值"});

        console.log(db.read(["hello1","hello2"],{
            "hello1":"这是第一个默认值",
            "hello2":"这是hello2的默认值"
        }));

        //清除数据,支持连续调用！
        db.unset("hello1").unset("hello2");

        console.log(db.read(["hello1","hello2"],{
            "hello1":"这是第一个默认值",
            "hello2":"这是hello2的默认值"
        }));

        //删除永久缓存表数据！
        db.clear();
    </script>
<script>

    $("#btn_first").click(function () {
        db.write("test_2","this is first data");
        alert("已经设置，请点击【点击获取数据】按钮获取信息");
    });
    $("#btn_sec").click(function () {
        db.write("test_2","this is second data");
        alert("已经设置，请点击【点击获取数据】按钮获取信息");
    });
    $("#btn_show").click(function () {
        $("#data").html(db.read("test_2","user not set data"));
    })
</script>

</body>
</html>